<template>
  <div style="min-height: 100vh">
  <el-container style="min-height: 100vh; ">
    <el-aside :width="sideWidth+'px'" style="background-color: rgb(238, 241, 246) ; min-height: 100vh;">
      <Aside :isCollapsed="isCollapsed" :logoTextShow="logoTextShow"/>
    </el-aside>
    <el-container>

      <el-header style="border-bottom: 1px solid #ccc ;">
        <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse" :user="user"  />
      </el-header>

      <el-main>
        <!--表示当前页面的子路由在 router-view展示-->
        <router-view @refreshUser="getUser"></router-view>
      </el-main>

    </el-container>

  </el-container>
  </div>
</template>

<script>
import Aside from "../../components/Aside";
import Header from "../../components/Header";

export default {
  name: 'Manager',
  components: {
    Aside,
    Header
  },
  data() {
    return {
      collapseBtnClass:'el-icon-s-fold',
      isCollapsed: false,
      sideWidth:200,
      logoTextShow:true,
      pathName:"",
      user: {}
    }
  },
  created() {
    //从后台获取最新的数据
    this.getUser()
  },
  methods: {

      collapse() {//点击按钮触发
      this.isCollapsed = !this.isCollapsed
      if (this.isCollapsed) {
        this.sideWidth = 64;
        this.collapseBtnClass = 'el-icon-s-unfold'
        this.logoTextShow = false;
      } else {
        this.sideWidth = 200;
        this.collapseBtnClass = 'el-icon-s-fold'
        this.logoTextShow = true;
      }
    },
   getUser(){
      let username = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")).username : null
      //从后台获取数据
       this.request.get("/user/username/"+username).then(res =>{
         //重新赋值最新的user数据
          this.user = res.data;
       })
    },
  }

}
</script>
